import React from 'react';
import ReactDOM from 'react-dom';
import { Breadcrumb, Button, Table, Message } from 'antd';

const Demo = React.createClass({
  getInitialState(){
    return {
      data:[],
      pagination: {
        pageSize: 5,
        currentPage: 1
      },

    }
  },
  componentDidMount(){
    this.fetch();
  },
  fetch(params){
    let param = Object.assign({},{currentPage:1, pageSize:5,rentContractId: this.props.location.state.rentContractId }, params);
    let _me = this;
    Utils.sendAjax({
      url: '/rent/record/list',
      data: JSON.stringify(param),
      callback: function(result) {
        if (result.code == '200') {
          let pagination = _me.state.pagination;
          pagination.total = result.page.total;
          _me.setState({
            data: result.data,
            pagination: pagination
          });
        } else {
          Message.error(result.message, 10)
        }
      }
    })
  },
  handleTableChange(pagination) {
    this.listRender(pagination.current);
  },
  handleSearch(){
    this.listRender(1);
  },
  //列表渲染
  listRender(current){

    let pager = {};
    pager.currentPage = current;
    this.setState({
      pagination: pager,
    });
    let param = Object.assign({},  pager);
    this.fetch(param);
  },

  rowKey(data){
  return data.rentRecordId;
  },
  render() {

    const columns = [{
      title: '租客姓名',
      dataIndex: 'renterName',
      key: 'renterName',
    }, {
      title: '租赁方式',
      dataIndex: 'age',
      key: 'age',
      render:(text, record) => {
        return (
          <span>
            押 {record.depositPeriod} 付 {record.rentPeriod}
          </span>
        );
      }
    },{
      title: '租期开始日期',
      dataIndex: 'startTime',
      key: 'startTime',
    },{
      title: '租期结束时间',
      dataIndex: 'endTime',
      key: 'endTime',
    },
      {
      title: '缴费日期',
      dataIndex: 'payTime',
      key: 'payTime',
    },
      {
      title: '应收金额',
      dataIndex: 'collectAmount',
      key: 'collectAmount',
    }, {
      title: '实收金额',
      dataIndex: 'receivedAmount',
      key: 'receivedAmount',
    }, {
      title: '押金余额',
      dataIndex: 'balance',
      key: 'balance',
    },{
        title: '状态',
        render: (text, record)=> {
          return (
            <span>{record.status == 1 ? '已付款' : '未付款'}</span>
          )
        }
      },
      {
      title: '备注',
      dataIndex: 'remark',
      key: 'remark',
    }];
    let pagination = this.state.pagination ;


    return (
      <div>
            <Table rowKey={this.rowKey}
                   dataSource={this.state.data}
                   columns={columns}
                   pagination={pagination}
                   onChange={this.handleTableChange}/>

      </div>
    )
  }
});

export default Demo